-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(dashboard): performance and refactoring #41065
base: master
Are you sure you want to change the base?
Conversation
|
@ShGKme You might have accidentally committed a dev build :D |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested and works. I couldn't spot regressions.
Nice work!
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
- aria-labelledby is not neede here, it is a hidden icon - visually-hidden has transformations that has huge performance impact in combination with other transformations, for example, on draggable Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
86f8b4f
to
da88d22
Compare
<div v-for="panelId in layout" :key="panels[panelId].id" class="panel"> | ||
<h2 class="panel__header"> | ||
<span aria-hidden="true" class="panel__header-icon" :class="getWidgetIconClass(panels[panelId])" /> | ||
{{ getWidgetTitle(panels[panelId]) }} | ||
</h2> | ||
<div class="panel__content" :class="{ loading: !isApiWidgetV2(panels[panelId].id) && !panels[panelId].mounted }"> | ||
<ApiDashboardWidget v-if="isApiWidgetV2(panels[panelId].id)" | ||
:widget="apiWidgets[panels[panelId].id]" | ||
:data="apiWidgetItems[panels[panelId].id]" | ||
:loading="loadingItems" /> | ||
<div v-else :ref="panels[panelId].id" :data-id="panels[panelId].id" /> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seeing the amount of scoping done here as well as methods used that could be computed, we would benefit from this being a chidren Vue Component directly :)
<ApiDashboardPanel v-for="panelId in layout"
:key="panels[panelId].id"
:panel="panels[panelId]" />
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
super nice!
Summary
Polish a bit dashboard app:
panel-activity--header--icon--description
and very nested selectors with selectors by tags.hidden-visually
has transforms that makes it terrible in performance with a combination of DraggableChecklist